<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入任务名称" clearable v-model="taskName" size="small" style="width: 200px" class="mRight10"> </el-input>
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            :default-time="['12:00:00']"
            style="width: 350px"
            v-model="taskTime"
            type="daterange"
            size="small"
            range-separator="——"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="mRight10"
            clearable
          >
          </el-date-picker>
          <el-button type="primary" size="small" @click="queryForPage(1)"> 查询 </el-button>
        </div>
        <!-- <div class="insp-header-right">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建养护任务</el-button>
        </div> -->
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
          max-height="660px"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.maintenanceFeedbackList"
                :header-cell-style="{
                  color: '#999',
                  height: '44px',
                }"
                style="width: 100%; border: 1px solid #ebeef5; border-bottom: 0"
                class="insp-table-expand"
              >
                <el-table-column label="养护单" prop="taskName" show-overflow-tooltip></el-table-column>
                <el-table-column label="病害名称" prop="diseaseName" show-overflow-tooltip></el-table-column>
                <el-table-column label="桥梁名称" prop="bridgeName" show-overflow-tooltip></el-table-column>
                <el-table-column label="病害位置" property="diseaseLocation" show-overflow-tooltip> </el-table-column>

                <el-table-column label="缺损记录" prop="defectRecord" show-overflow-tooltip></el-table-column>
                <el-table-column label="养护描述" prop="feedbackDescribe" show-overflow-tooltip></el-table-column>
                <el-table-column label="处理状态" property="itemUserList" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <!-- <label :class="['insp-table-label', taskStatusClass(scope.row.status)]">
                      {{ taskStatusText(scope.row.status) }}
                    </label> -->
                    <span>{{ scope.row.emergencyState }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-tooltip content="详情">
                      <el-button type="text" icon="el-icon-document" @click="handelDetail(scope.row.id)"> </el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="实际开始时间" prop="realSdt" show-overflow-tooltip></el-table-column> -->
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="养护名称" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column prop="bridgeName" label="桥梁名称" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column prop="billNo" label="单号" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column property="type" label="养护类型" width="100">
            <template slot-scope="scope">
              <label :class="['insp-table-label', inspTypeClass(scope.row.type)]">
                {{ inspTypeText(scope.row.type) }}
              </label>
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceNormStr" label="养护规则" show-overflow-tooltip></el-table-column>
          <el-table-column prop="urgencyLevel" label="紧急程度" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="reportDept" label="养护部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="distributionPersonName" align="center" width="150" label="养护负责人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="maintenanceDescribe" label="养护描述" show-overflow-tooltip></el-table-column>
          <el-table-column property="state" label="验收" width="200">
            <template slot-scope="scope">
              <label :class="['insp-table-label', taskStatusClass(scope.row.state)]">
                {{ taskStatusText(scope.row.state) }}
              </label>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-tooltip content="验收">
                <el-button type="text" icon="el-icon-document-checked" @click="handelCheck(scope.row.id)">
                </el-button>
              </el-tooltip> -->
          <!-- <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="handelDelete(scope.row.id)"> </el-button>
              </el-tooltip>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :total="recordsTotal"
        >
        </el-pagination>
      </div>

      <!--养护记录详情-->
      <vx-popup :title="detailTitle" width="880px" @close="cancelDetail" :active.sync="detailVisible" @confirmPopup="cancelDetail" @cancelPopup="cancelDetail">
        <div class="insp-popup-detail">
          <el-row justify="space-between" :gutter="20">
            <el-col :span="12">
              <label>养护单 : </label>
              <span>{{ detailInfo['taskName'] || '' }}</span>
            </el-col>
            <el-col :span="12">
              <label>养护类型 : </label>
              <span>{{ detailInfo['taskTypeStr'] || '' }}</span>
            </el-col>
          </el-row>

          <el-row justify="space-between" :gutter="20">
            <el-col :span="12">
              <label>桥梁名称 : </label>
              <span>{{ detailInfo['bridgeName'] || '' }}</span>
            </el-col>
            <el-col :span="12">
              <label>病害名称 : </label>
              <span>{{ detailInfo['diseaseName'] || '' }}</span>
            </el-col>
          </el-row>
          <el-row justify="space-between" :gutter="20">
            <el-col :span="12">
              <label>病害位置 : </label>
              <span>{{ detailInfo['diseaseLocation'] || '' }}</span>
            </el-col>
            <el-col :span="12">
              <label>缺损记录 : </label>
              <span>{{ detailInfo['defectRecord'] || '' }}</span>
            </el-col>
          </el-row>

          <el-row justify="space-between" :gutter="20">
            <el-col :span="12">
              <label>养护人员: </label>
              <span>{{ detailInfo['feedbackName'] || '' }}</span>
            </el-col>
            <el-col :span="12">
              <label>养护时间: </label>
              <span>{{ detailInfo['feedbackTime'] || '' }}</span>
            </el-col>
          </el-row>

          <el-row justify="space-between" :gutter="20">
            <el-col :span="12">
              <label>巡检人员: </label>
              <span>{{ detailInfo['inspectionName'] || '' }}</span>
            </el-col>
            <el-col :span="12">
              <label>养护级别: </label>
              <span>{{ detailInfo['level'] ? (detailInfo['level'] === 2 ? '三级' : '二级') : '一级' }}</span>
            </el-col>
          </el-row>

          <el-row justify="space-between" :gutter="20">
            <el-col :span="12">
              <label>处理记录: </label>
              <span>{{ detailInfo['status'] ? statusText(detailInfo['status']) : '初报未处理' }}</span>
            </el-col>
          </el-row>

          <el-row justify="space-between" :gutter="20">
            <el-col :span="24">
              <label>养护图片 : </label>
              <span class="imageList">
                <el-image
                  style="width: 70px; height: 70px; margin-right: 5px"
                  v-for="(item, index) in computedImageList"
                  :key="`${index}image`"
                  :src="item"
                  :preview-src-list="computedImageList"
                ></el-image>
              </span>
            </el-col>
          </el-row>

          <el-row justify="space-between" :gutter="20">
            <el-col :span="24">
              <label>养护反馈 : </label>
              <span class="over" :title="detailInfo['feedbackDescribe'] || ''">{{ detailInfo['feedbackDescribe'] || '' }}</span>
            </el-col>
          </el-row>
        </div>
      </vx-popup>

      <!--养护验收弹框-->
      <vx-popup title="验收" width="600px" @close="cancelCheck" :active.sync="dialogCheckVisible" @confirmPopup="submitCheck" @cancelPopup="cancelCheck">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="验收结果" prop="state">
            <el-radio-group v-model="ruleForm.state">
              <el-radio :label="2">合格</el-radio>
              <el-radio :label="3">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="记录描述 :" prop="acceptanceDescribe">
            <el-input type="textarea" maxlength="200" rows="3" v-model="ruleForm.acceptanceDescribe" style="width: 380px" show-word-limit> </el-input>
          </el-form-item>
        </el-form>
      </vx-popup>
    </div>
  </div>
</template>
<script>
import base from '@/api/base'
export default {
  data() {
    return {
      detailTitle: '养护记录详情',
      detailInfo: {},
      detailVisible: false,
      taskName: '',
      taskTime: [],
      pageSize: 14,
      currentPage: 1,
      recordsTotal: 0,
      tableData: [],
      dialogCheckVisible: false,
      ruleForm: {
        state: 2,
        acceptanceDescribe: '',
      },
      rules: {
        state: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        acceptanceDescribe: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur',
          },
        ],
      },
      editId: null,
    }
  },
  created() {
    this.queryForPage(1)
  },
  watch: {
    $route(to, from) {
      this.queryForPage(1)
    },
  },
  computed: {
    computedImageList() {
      let _list = this.detailInfo['fileVOList'] ? this.detailInfo['fileVOList'] : []
      return _list.map((item) => `${base.DOWNLOADURL}${item.filePath}`)
    },
  },
  methods: {
    handelDetail(val) {
      this.detailVisible = true
      this.queryRecordById(val)
    },
    cancelDetail() {
      this.detailVisible = false
    },
    queryRecordById(id) {
      this.$api.curing
        .queryRecordById({
          id,
        })
        .then((response) => {
          if (response.data.success) {
            if (response.data.data) {
              this.detailInfo = response.data.data
              console.log(this.detailInfo)
            }
          }
        })
    },
    statusText(type) {
      switch (type) {
        case 0:
          return '创建设施损坏情况单'
        case 1:
          return '设施管理科安排任务中'
        case 2:
          return '设施待确认(巡视大队)'
        case 3:
          return '设施确认中(巡视大队)'
        case 4:
          return '设施待确认(设施科)'
        case 5:
          return '设施确认中(设施员)'
        case 6:
          return '设施确认完成(待派维修单)'
        case 7:
          return '维修单派单中'
        case 8:
          return '施工部门待接单'
        case 9:
          return '施工部门已接单'
        case 10:
          return '施工维修中'
        case 11:
          return '施工完成'
        case 12:
          return '维修结果待核查'
        case 13:
          return '维修结果核查中'
        case 14:
          return '维修结果待确认'
        case 15:
          return '维修结果确认中'
        case 98:
          return '待发'
        case 99:
          return '处理完成'
        default:
          return ''
      }
    },
    queryForPage(pageIndex) {
      if (pageIndex && pageIndex === 1) {
        this.currentPage = 1
      }
      const _params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        name: this.taskName,
      }
      // console.log(this.taskTime);
      if (this.taskTime && this.taskTime.length > 0) {
        _params.startTime = this.taskTime[0] || ''
        _params.endTime = this.taskTime[1] || ''
      }
      this.$api.curing.queryTasksPage(_params).then((response) => {
        if (response.data.success) {
          if (response.data.data && response.data.data.length > 0) {
            this.tableData = response.data.data.map((item, index) => ({
              id: item.id || '',
              bridgeName: item.bridgeName || '',
              name: item.name || '',
              type: item.type,
              billNo: item.billNo,
              maintenanceDescribe: item.maintenanceDescribe || '',
              diseaseDegree: item.diseaseDegree === 0 ? '一级' : item.diseaseDegree === 1 ? '二级' : item.diseaseDegree === 2 ? '三级' : '',
              urgencyLevel: item.urgencyLevel === 0 ? '一般' : item.urgencyLevel === 1 ? '中度' : item.urgencyLevel === 2 ? '紧急' : '',
              maintenanceFeedbackList: item.maintenanceFeedbackList,
              reportDept: item.reportDept || '',
              distributionPersonName: item.distributionPersonName || '',
              startTime: item.startTime || '',
              endTime: item.endTime || '',
              maintenanceNormStr: item.maintenanceNormStr || '',
              state: item.state,
            }))
          } else {
            this.tableData = []
          }
          this.recordsTotal = response.data.recordsTotal
        }
      })
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.queryForPage()
    },
    handleAdd() {
      this.$router.push('/curing/addTask')
    },
    handelDelete(val) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.curing.deleteTask([val]).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: 'success',
              })
              this.queryForPage()
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize)
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage)
            } else {
              this.$vs.notify({
                text: '删除失败',
                color: 'danger',
              })
            }
          })
        })
        .catch(() => {
          this.$vs.notify({
            text: '已取消删除',
            color: 'primary',
          })
        })
    },
    emptyForm() {
      this.ruleForm = {
        state: 2,
        acceptanceDescribe: '',
      }
    },
    handelCheck(val) {
      this.emptyForm()
      this.dialogCheckVisible = true
      this.editId = val
    },
    cancelCheck() {
      this.dialogCheckVisible = false
    },
    submitCheck() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return false
        }
        let _params = {
          id: this.editId,
          state: this.ruleForm.state,
          acceptanceDescribe: this.ruleForm.acceptanceDescribe,
        }
        this.$api.curing.accpetTask(_params).then((response) => {
          if (response.data.success) {
            this.$vs.notify({
              text: '操作成功',
              color: 'success',
            })
            this.dialogCheckVisible = false
            this.queryForPage(1)
          }
        })
      })
    },
    inspTypeClass(type) {
      switch (type) {
        case 0:
          return 'inspTypeA'
        case 1:
          return 'inspTypeB'
        case 2:
          return 'inspTypeC'
      }
    },
    inspTypeText(type) {
      switch (type) {
        case 0:
          return '日常养护'
        case 1:
          return '亮化养护'
        case 2:
          return '定期养护'
      }
    },
    taskStatusClass(type) {
      switch (type) {
        case 0:
          return 'planStatus1'
        case 1:
          return 'planStatus1'
        case 2:
          return 'planStatus1'
        case 3:
          return 'planStatus1'
        case 4:
          return 'planStatus1'
        case 5:
          return 'planStatus1'
        case 6:
          return 'planStatus1'
        case 7:
          return 'planStatus1'
        case 8:
          return 'planStatus1'
        case 9:
          return 'planStatus1'
        case 10:
          return 'planStatus1'
        case 11:
          return 'planStatus1'
        case 12:
          return 'planStatus1'
        case 13:
          return 'planStatus1'
        case 14:
          return 'planStatus1'
        case 15:
          return 'planStatus1'
        case 98:
          return 'planStatus1'
        case 99:
          return 'planStatus99'
        default:
          return ''
      }
    },
    taskStatusText(type) {
      switch (type) {
        case 0:
          return '创建设施损坏情况单'
        case 1:
          return '设施管理科安排任务中'
        case 2:
          return '设施待确认(巡视大队)'
        case 3:
          return '设施确认中(巡视大队)'
        case 4:
          return '设施待确认(设施科)'
        case 5:
          return '设施确认中(设施员)'
        case 6:
          return '设施确认完成(待派维修单)'
        case 7:
          return '维修单派单中'
        case 8:
          return '施工部门待接单'
        case 9:
          return '施工部门已接单'
        case 10:
          return '施工维修中'
        case 11:
          return '施工完成'
        case 12:
          return '维修结果待核查'
        case 13:
          return '维修结果核查中'
        case 14:
          return '维修结果待确认'
        case 15:
          return '维修结果确认中'
        case 98:
          return '待发'
        case 99:
          return '处理完成'
        default:
          return ''
      }
    },
  },
}
</script>
<style scoped lang="scss">
@import '@/views/inspection/insp.scss';

/deep/.el-table__header tr,
/deep/.el-table__header th {
  padding: 0;
  height: 44px;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
  font-size: 14px;
}

/deep/.el-table th {
  font-weight: 500;
  color: #fff;
}

/deep/.el-table td {
  font-weight: 400;
  color: #444;
  padding: 0;
  height: 44px;
  line-height: 44px;
}

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f1f5fc;
}

/deep/.insp-plan-detailTabs .el-tabs__header {
  padding: 0;
  margin: -20px 0 0;
  background: #fff;
}

/deep/.insp-plan-detailTabs .el-tabs__item {
  font-size: 14px;
  font-weight: 400;
  color: #999;
  position: relative;

  text-align: center;
}

/deep/.insp-plan-detailTabs .el-tabs__active-bar {
  width: 12px !important;
  background-color: #327bdc;

  left: 28px;
  margin-left: -6px;
}

/deep/.insp-plan-detailTabs .el-tabs__content {
  min-height: 250px;
}

/deep/.el-tabs__item.is-active {
  color: #327bdc;
}
</style>
